<template>
<div class="message-content message-box-shadow" v-show="hasLiked">
      <el-scrollbar style="height: 100%;">
         <div class="message-content message-content__inner" >
      <div class="interaction-item" 
      v-for="item in mergedLikes" 
      :key="item.uniqueId"
      @mouseenter="showDeleteIndex=item.uniqueId" 
      @mouseleave="showDeleteIndex=-1">
        <div class="interaction-item__left single">
          <el-avatar  :size="45" :src="item.avatar" size="40"></el-avatar>
        </div>
        <div class="interaction-item__right">
          <div class="interaction-item__content">
            <div class="interaction-item__title">
              <span class="interaction-item__uname">{{ item.nickname }}</span>
              <span class="interaction-item__action" v-if="item.type==='comment'">赞了我的评论</span>
              <span class="interaction-item__action" v-if="item.type==='video'">赞了我的视频</span>
             </div>
             <div class="interaction-item__metadata">
              <div class="interaction-item__time">{{handleTimeShow(item.updatedAt)}}</div>
              <div class="interaction-item__btn invisible delete" v-show="showDeleteIndex===item.uniqueId" @click="open(item)">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16" style="width: 16px; height: 16px;"><path d="M5 3.25C5 2.3295266666666663 5.746193333333332 1.5833333333333333 6.666666666666666 1.5833333333333333L9.333333333333332 1.5833333333333333C10.253799999999998 1.5833333333333333 11 2.3295266666666663 11 3.25L11 3.833333333333333C11 4.109473333333333 10.776133333333334 4.333333333333333 10.5 4.333333333333333C10.223866666666666 4.333333333333333 10 4.109473333333333 10 3.833333333333333L10 3.25C10 2.8818133333333336 9.701533333333334 2.583333333333333 9.333333333333332 2.583333333333333L6.666666666666666 2.583333333333333C6.298473333333334 2.583333333333333 6 2.8818133333333336 6 3.25L6 3.833333333333333C6 4.109473333333333 5.77614 4.333333333333333 5.5 4.333333333333333C5.22386 4.333333333333333 5 4.109473333333333 5 3.833333333333333L5 3.25z" fill="currentColor"></path><path d="M1.3333333333333333 4.166666666666666C1.3333333333333333 3.8905266666666667 1.5571933333333332 3.6666666666666665 1.8333333333333333 3.6666666666666665L14.166666666666666 3.6666666666666665C14.4428 3.6666666666666665 14.666666666666666 3.8905266666666667 14.666666666666666 4.166666666666666C14.666666666666666 4.442806666666666 14.4428 4.666666666666666 14.166666666666666 4.666666666666666L1.8333333333333333 4.666666666666666C1.5571933333333332 4.666666666666666 1.3333333333333333 4.442806666666666 1.3333333333333333 4.166666666666666z" fill="currentColor"></path><path d="M3.1666666666666665 5.75C3.4428066666666663 5.75 3.6666666666666665 5.973859999999999 3.6666666666666665 6.25L3.6666666666666665 11.603066666666665C3.6666666666666665 12.442166666666667 4.28456 13.130766666666666 5.094706666666666 13.1985C5.950586666666666 13.270033333333332 6.993366666666667 13.333333333333332 8 13.333333333333332C9.006633333333333 13.333333333333332 10.049399999999999 13.270033333333332 10.905299999999999 13.1985C11.715433333333332 13.130766666666666 12.333333333333332 12.442166666666667 12.333333333333332 11.603066666666665L12.333333333333332 6.25C12.333333333333332 5.973859999999999 12.557199999999998 5.75 12.833333333333332 5.75C13.109466666666666 5.75 13.333333333333332 5.973859999999999 13.333333333333332 6.25L13.333333333333332 11.603066666666665C13.333333333333332 12.9358 12.342766666666666 14.081833333333332 10.9886 14.195C10.1174 14.267833333333332 9.044566666666666 14.333333333333332 8 14.333333333333332C6.955433333333333 14.333333333333332 5.882626666666667 14.267833333333332 5.011406666666666 14.195C3.6572266666666664 14.081833333333332 2.6666666666666665 12.9358 2.6666666666666665 11.603066666666665L2.6666666666666665 6.25C2.6666666666666665 5.973859999999999 2.8905266666666667 5.75 3.1666666666666665 5.75z" fill="currentColor"></path><path d="M6.333333333333333 7C6.60948 7 6.833333333333333 7.223866666666667 6.833333333333333 7.5L6.833333333333333 9.833333333333332C6.833333333333333 10.109466666666666 6.60948 10.333333333333332 6.333333333333333 10.333333333333332C6.057193333333332 10.333333333333332 5.833333333333333 10.109466666666666 5.833333333333333 9.833333333333332L5.833333333333333 7.5C5.833333333333333 7.223866666666667 6.057193333333332 7 6.333333333333333 7z" fill="currentColor"></path><path d="M9.666666666666666 7C9.942799999999998 7 10.166666666666666 7.223866666666667 10.166666666666666 7.5L10.166666666666666 9.833333333333332C10.166666666666666 10.109466666666666 9.942799999999998 10.333333333333332 9.666666666666666 10.333333333333332C9.390533333333334 10.333333333333332 9.166666666666666 10.109466666666666 9.166666666666666 9.833333333333332L9.166666666666666 7.5C9.166666666666666 7.223866666666667 9.390533333333334 7 9.666666666666666 7z" fill="currentColor"></path></svg> 
                <span>删除该通知</span>
              </div>
              <div class="interaction-item__btn invisible notice" v-show="showDeleteIndex===item.uniqueId">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16" style="width: 16px; height: 16px;"><path d="M3.000033333333333 6.999933333333333C3.000033333333333 4.2385 5.238613333333333 1.99992 8.000033333333333 1.99992C9.585066666666666 1.99992 10.998 2.738033333333333 11.9132 3.8873266666666666C12.0855 4.103133333333333 12.050199999999998 4.417746666666666 11.834399999999999 4.59002C11.6186 4.7623 11.303999999999998 4.727013333333333 11.131733333333333 4.5112C10.398066666666665 3.5893866666666665 9.268066666666666 2.99992 8.000033333333333 2.99992C5.790893333333333 2.99992 4.000033333333333 4.79078 4.000033333333333 6.999933333333333L4.000033333333333 9.861666666666666C4.000033333333333 10.189499999999999 3.869793333333333 10.503933333333332 3.6379666666666663 10.735766666666665L3.1187733333333334 11.254966666666665C2.9119866666666665 11.461733333333331 3.031786666666666 11.800966666666667 3.317853333333333 11.821599999999998C3.59328 11.8415 3.8004333333333333 12.0809 3.7805533333333328 12.356333333333334C3.7606666666666664 12.631733333333333 3.5212733333333333 12.838899999999999 3.245846666666666 12.818999999999999C2.0859266666666665 12.735266666666668 1.6104866666666666 11.349033333333333 2.41166 10.547866666666666L2.9308599999999996 10.028666666666666C2.975153333333333 9.984366666666666 3.000033333333333 9.924299999999999 3.000033333333333 9.861666666666666L3.000033333333333 6.999933333333333zM12.3108 5.6358266666666665C12.582099999999999 5.591926666666667 12.837566666666667 5.776246666666666 12.881466666666665 6.047506666666667C12.9587 6.351893333333333 13.000033333333334 6.671279999999999 13.000033333333334 6.999933333333333L13.000033333333334 9.861666666666666C13.000033333333334 9.924299999999999 13.024899999999999 9.984366666666666 13.069233333333333 10.028666666666666L13.5884 10.547866666666666C14.389566666666667 11.349033333333333 13.914133333333334 12.735266666666668 12.754233333333334 12.818999999999999C11.536033333333332 12.906966666666666 9.818933333333334 12.999933333333333 8.000033333333333 12.999933333333333C7.271566666666666 12.999933333333333 6.560379999999999 12.984333333333334 5.8954466666666665 12.960333333333333C5.61946 12.9513 5.403066666666666 12.720233333333333 5.41212 12.444233333333333C5.421166666666666 12.168233333333333 5.652233333333333 11.951866666666668 5.92822 11.960933333333333C6.5839333333333325 11.984566666666666 7.284066666666666 11.999933333333333 8.000033333333333 11.999933333333333C9.787299999999998 11.999933333333333 11.478933333333332 11.908499999999998 12.682199999999998 11.821599999999998C12.9683 11.800966666666667 13.088066666666666 11.461733333333331 12.881266666666665 11.254966666666665L12.362066666666665 10.735766666666665C12.130266666666666 10.503933333333332 12.000033333333334 10.189499999999999 12.000033333333334 9.861666666666666L12.000033333333334 6.999933333333333C12.000033333333334 6.725266666666666 11.964766666666666 6.459253333333333 11.899099999999999 6.206486666666667C11.855233333333333 5.935219999999999 12.039533333333333 5.679726666666667 12.3108 5.6358266666666665z" fill="currentColor"></path><path d="M8.720066666666666 2.0266933333333332C8.720066666666666 2.424366666666667 8.397666666666666 2.7467466666666667 8 2.7467466666666667C7.602333333333332 2.7467466666666667 7.279933333333333 2.424366666666667 7.279933333333333 2.0266933333333332C7.279933333333333 1.62902 7.602333333333332 1.3066399999999998 8 1.3066399999999998C8.397666666666666 1.3066399999999998 8.720066666666666 1.62902 8.720066666666666 2.0266933333333332z" fill="currentColor"></path><path d="M6.29134 11.999833333333331C6.567486666666666 11.999833333333331 6.791333333333332 12.223700000000001 6.791333333333332 12.499833333333331C6.791333333333332 13.174633333333333 7.335333333333333 13.7165 8.000066666666665 13.7165C8.664833333333332 13.7165 9.208833333333333 13.174633333333333 9.208833333333333 12.499833333333331C9.208833333333333 12.223700000000001 9.4327 11.999833333333331 9.708833333333333 11.999833333333331C9.984933333333332 11.999833333333331 10.208833333333333 12.223700000000001 10.208833333333333 12.499833333333331C10.208833333333333 13.721233333333332 9.222766666666665 14.7165 8.000066666666665 14.7165C6.777386666666666 14.7165 5.79134 13.721233333333332 5.79134 12.499833333333331C5.79134 12.223700000000001 6.0152 11.999833333333331 6.29134 11.999833333333331z" fill="currentColor"></path><path d="M13.684266666666666 2.1464466666666664C13.879533333333331 2.3417133333333333 13.879533333333331 2.658293333333333 13.684266666666666 2.853553333333333L2.6842799999999998 13.853566666666666C2.4890266666666667 14.0488 2.17244 14.0488 1.97718 13.853566666666666C1.7819133333333332 13.658299999999999 1.7819133333333332 13.3417 1.97718 13.146433333333334L12.977166666666665 2.1464466666666664C13.172433333333332 1.9511866666666666 13.489033333333333 1.9511866666666666 13.684266666666666 2.1464466666666664z" fill="currentColor"></path></svg> 
                <span>不再通知</span>
              </div>
             </div>
             <div class="interaction-item__cover" @click="$router.push(`/videoDetail/${item.videoId}`)">
              <div class="bili-ellipsis" v-show="item.type==='comment'">{{ item.content }}</div>
              <div class="b-img">
                <picture class="b-img__inner" v-show="item.type==='video'">
                    <img :src="item.pictureUrl" >
                </picture>
            </div>
            </div>
          </div>
        </div>
      </div>
      </div>
      </el-scrollbar>
</div>
  

<div class="message-box-shadow message-content__inner" v-show="!hasLiked || !isLogin">
  <div class="at-layout">
    <div class="at-emtpy">
      <div class="message-empty">
        <img src="/notdata.png" alt="loading">
      </div>
    </div>
  </div>
</div>


</template>
<script setup>
import { ElAvatar, ElMessage ,ElMessageBox} from 'element-plus';
import { getCommentsLike ,deleteCommentsLike,getVideosLike,deleteVideosLike} from '@/api/receiveLike';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import emitter from '@/utils/eventBus';
import { useUserStore } from '@/store/useUserStore';
import { storeToRefs } from 'pinia';


//是否有回复我的消息
const hasLiked = ref(true);
//用户信息
const {userInfo,isLogin} = storeToRefs(useUserStore());
//消息列表
const commentsList=ref([])
const videosList=ref([])
//定位删除按钮的索引
const showDeleteIndex=ref('-1');

//接收被点赞通知
function handleLikeMessage(data){
  if(!data) return
}


//获取被赞评论/视频被点赞数据
async function getRecordsLikes(){
    if(!isLogin.value) return;
    try{
        const resComment=await getCommentsLike(userInfo.value.userId);
        const resVideo=await getVideosLike(userInfo.value.userId);
        if(resComment?.length===0&&resVideo?.length===0){
            hasLiked.value=false;
            return;
        }
        commentsList.value=resComment;
        videosList.value=resVideo;
    }catch{
        console.error("Error: 请求失败")
    }
}

//转化成时间戳
function toTimestamp(value){
  if(!value) return 0
  if (typeof value === 'string') {
    return new Date(value.replace(/-/g, '/')).getTime()
  }
  try {
    return new Date(value).getTime()
  } catch (e) {
    return 0
  }
}

//添加区别类型
function mergeLikes(commentsList, videosList){
  // 转换评论点赞数据
  const convertedComments = commentsList.map(item => ({
    id: item.id,
    uniqueId:`comment_${item.id}`, //唯一id
    userId: item.userId,
    nickname: item.nickname,
    avatar: item.avatar,
    videoId: item.videoId,
    updatedAt: item.updatedAt,
    type: 'comment',
    commentId: item.commentId,
    content: item.content
  }));

  // 转换视频点赞数据
  const convertedVideos = videosList.map(item => ({
    id: item.id,
    uniqueId: `video_${item.id}`,
    userId: item.userId,
    nickname: item.nickname,
    avatar: item.avatar,
    videoId: item.videoId,
    createdAt: item.createdAt,
    updatedAt: item.updatedAt,
    type: 'video',
    pictureUrl: item.pictureUrl
  }));

  // 合并数组
  return [...convertedComments, ...convertedVideos];
};

//合并后
 const mergedLikes = computed(() => {
    const merged = mergeLikes(commentsList.value, videosList.value);
     return merged.sort((a, b) => toTimestamp(b.updatedAt) - toTimestamp(a.updatedAt));
});

//删除被赞评论/视频通知
async function deleteLikeRecord(item) {
    if(item===null) return;
    try{
        item.type==='video'?await deleteVideosLike(item.id):await deleteCommentsLike(item.id);
        getRecordsLikes()
    }catch{
        console.error("Error: 请求失败")
    }
}

//删除评论弹窗
const  open = async (item) => {
  ElMessageBox.confirm(
    '该条通知删除后，当有新点赞时会重新出现在列表，是否继续？',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    }
  )
    .then(() => {
    deleteLikeRecord(item)
    ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}

function handleTimeShow(value) {
  const date = new Date(value)
  const now = new Date()
  // 判断是否为今天
  const isToday =date.getFullYear() === now.getFullYear() &&date.getMonth() === now.getMonth() &&date.getDate() === now.getDate()
  // 补零函数
  const pad = n => n.toString().padStart(2, '0')
  const hh = pad(date.getHours())
  const mm = pad(date.getMinutes())
  if (!isToday) {
    return value
  }
  return `今天 ${hh}:${mm}`
}

onMounted(()=>{
    getRecordsLikes()
    emitter.on('likeMessage',handleLikeMessage)
})

onUnmounted(()=>{
  emitter.off('likeMessage',handleLikeMessage)
})

</script>
<style scoped>
.message-content {
    box-sizing: border-box;
    position: relative;
    height: 100%;
    padding: 3px 0 10px 10px;
    font-family: Microsoft YaHei;
}
.message-box-shadow {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
}
.interaction-item {
    position: relative;
    cursor: pointer;
    display: flex;
    gap:7px;
}
.interaction-item__left {
    padding-left: 16px;
    padding-top: 24px;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    position: relative;
}
.interaction-item__right {
    width: calc(100% - 76px);
    box-sizing: border-box;
    padding: 24px 16px 24px 0;
    border-bottom: 1px solid #e3e5e7;
    
}
.interaction-item__content {
    box-sizing: border-box;
    position: relative;
    padding-right: 76px;
}
.interaction-item__title {
    display: flex;
    font-size: 14px;
    line-height: 15px;
}
.interaction-item__uname {
    font-weight: 700;
    text-decoration: none;
    color: #18191c;
    font-size: 14px;
    font-family: Microsoft YaHei;
}
.interaction-item__action {
    margin-left: 8px;
    color: #61666d;
    font-family: Microsoft YaHei;
}
.interaction-item__msg {
    margin-top: 10px;
    font-size: 14px;
    line-height: 18px;
    color: #18191c;
}

.bili-ellipsis {
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.interaction-item__metadata{
    margin-top: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #9499a0;
    height: 25px;

}
.interaction-item__time {
    margin-right: 15px;
    font-size: 12px;
}
.reply {
    height: 100%;
}
.interaction-item__btn {
    cursor: pointer;
    margin-right: 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.interaction-item__btn:hover{
    color: #00aeec;
}
/* 鼠标移入显示 */
/* .interaction-item__btn.invisible {
    opacity: 0;
    pointer-events: none;
} */

 .interaction-item__cover {
    position: absolute;
    right: 0;
    top: -7px;
    width: 60px;
    height: 60px;
}
.interaction-item__cover div {
    width: 100%;
    height: 100%;
    color: #9499a0;
    font-size: 14px;
    line-height: 15px;
}
.interaction-item__cover .b-img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    overflow: hidden;
}
.b-img__inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit:cover
}
.bili-ellipsis {
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
@media screen and (min-width: 1920px) {
  .message-content{
  height: 86vh;
}
}

.message-content__inner {
    width: 100%;
}
.message-box-shadow {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
}
.at, .at-layout{
    height: 100%;
}
.message-empty {
    width: 100%;
    height: 256px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.message-empty img {
    height: 100%;
}
img {
    overflow-clip-margin: content-box;
    overflow: clip;
}
</style>